<template>
    <div>
        <a-page-header
            style="border: 1px solid rgb(235, 237, 240)"
            title="后台模型管理界面"
            sub-title="管理员模式"
            @back="() => $router.go(-1)"
        />
        <div style="display:flex">
            <div id="container_pie" class="container_pie"></div>
            <div id="model_control" class="model_control">
                <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-form-model-item label="选择管理的模型">
                    <a-select v-model="form.model" placeholder="please select your model">
                        <a-select-option value="compkey">
                        Compkey模型
                        </a-select-option>
                        <a-select-option value="galaxy">
                        Galaxy模型
                        </a-select-option>
                    </a-select>
                    </a-form-model-item>
                    
                    <a-form-model-item label="选择训练日期">
                    <a-date-picker
                        v-model="form.date1"
                        show-time
                        type="date"
                        placeholder="Pick a date"
                        style="width: 100%;"
                    />
                    </a-form-model-item>

                    <a-form-model-item label="是否暂时关闭服务器">
                    <a-switch v-model="form.delivery" />
                    </a-form-model-item>

                    <a-form-model-item label="选择模型处理项">
                    <a-checkbox-group v-model="form.type">
                        <a-checkbox value="1" name="type">
                        优化点赞点踩
                        </a-checkbox>
                        <a-checkbox value="2" name="type">
                        添加新词汇
                        </a-checkbox>
                    </a-checkbox-group>
                    </a-form-model-item>

                    <a-form-model-item label="管理员签名">
                        <a-input v-model="form.name" />
                    </a-form-model-item>

                    <a-form-model-item label="优化日志信息">
                    <a-input v-model="form.desc" type="textarea" />
                    </a-form-model-item>

                    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" @click="onSubmit">
                        开始优化
                    </a-button>
                    <a-button style="margin-left: 10px;">
                        取消优化
                    </a-button>
                    </a-form-model-item>
                </a-form-model>
            </div>
        </div>
        
    </div>
</template>

<script>
import { Pie } from '@antv/g2plot';

export default {
    data(){
        return{
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
            form: {
                name: '',
                model: undefined,
                date1: undefined,
                delivery: false,
                type: [],
                desc: '',
            },
        }
    },
    mounted(){
        this.drawPie()
    },
    methods:{
        onSubmit() {
            console.log('submit!', this.form);
        },
        drawPie(){
            const data = [
            { type: '一星', value: 27 },
            { type: '二星', value: 25 },
            { type: '三星', value: 18 },
            { type: '四星', value: 15 },
            { type: '五星', value: 10 },
            ];

            const piePlot = new Pie('container_pie', {
            appendPadding: 10,
            data,
            angleField: 'value',
            colorField: 'type',
            radius: 1,
            innerRadius: 0.64,
            meta: {
                value: {
                formatter: (v) => `问卷份数 ${v}`,
                },
            },
            label: {
                type: 'inner',
                offset: '-50%',
                autoRotate: false,
                style: { textAlign: 'center' },
                formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
            },
            statistic: {
                title: {
                offsetY: -8,
                },
                content: {
                offsetY: -4,
                },
            },
            // 添加 中心统计文本 交互
            interactions: [
                { type: 'element-selected' },
                { type: 'element-active' },
                {
                type: 'pie-statistic-active',
                cfg: {
                    start: [
                    { trigger: 'element:mouseenter', action: 'pie-statistic:change' },
                    { trigger: 'legend-item:mouseenter', action: 'pie-statistic:change' },
                    ],
                    end: [
                    { trigger: 'element:mouseleave', action: 'pie-statistic:reset' },
                    { trigger: 'legend-item:mouseleave', action: 'pie-statistic:reset' },
                    ],
                },
                },
            ],
            });

            piePlot.render();
        }
    }    
}

</script>

<style lang="scss" scoped>
.container_pie{
    height: 400px;
    width: 500px;
    border-right: 2px solid #3333;
    padding: 20px;
    border-bottom: 2px solid #3333;
    border-radius: 25px;
    margin: 20px;
    margin-top: 145px;
}
.model_control{
    height: 685px;
    width: 780px;
    border-right: 2px solid #3333;
    padding: 20px;
    border-bottom: 2px solid #3333;
    border-radius: 25px;
    margin-left: 120px;
    margin-top: 15px;
    padding-top: 80px;
}
</style>